<template>
  <div class="p-6px">
    <el-descriptions title="基础信息" border style="margin-bottom: 10px">
      <el-descriptions-item label="用户名">{{ info?.username }}</el-descriptions-item>
      <el-descriptions-item label="头像">
        <div class="flex justify-center">
          <el-image
            class="rounded-full w-36px h-36px"
            :preview-teleported="true"
            :preview-src-list="[info.avatar]"
            :src="
              info.avatar != null && info.avatar !== ''
                ? info.avatar
                : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            "
          >
            <template #error>
              <el-icon class="c-[--el-color-primary]" :size="36">
                <CircleCloseFilled />
              </el-icon>
            </template>
          </el-image>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">{{ info?.mobile }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{ info?.nickname }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ info?.email }}</el-descriptions-item>
      <el-descriptions-item label="等级">{{ info?.level?.name }}</el-descriptions-item>
      <el-descriptions-item label="余额">{{ info?.balance }}</el-descriptions-item>
      <el-descriptions-item label="积分">{{ info?.score }}</el-descriptions-item>
      <el-descriptions-item label="加入ip">{{ info?.join_ip }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{ info?.created_at }}</el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in tabs" :key="index">
        <div v-if="activeName === item.key">
          <component :member_id="info?.id" :is="item.component" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="memberDetailPage">
import { ref, markRaw } from "vue";
import IntegralLog from "./components/IntegralLog.vue";
import OrderRecord from "./components/OrderRecord.vue";
import BalanceRecord from "./components/BalanceRecord.vue";

interface IDrawerProps {
  info: any;
}

withDefaults(defineProps<IDrawerProps>(), {
  info: {}
});

let tabs = ref<any>([
  {
    name: "积分记录",
    key: "积分记录",
    component: markRaw(IntegralLog)
  },
  {
    name: "余额记录",
    key: "余额记录",
    component: markRaw(BalanceRecord)
  },
  {
    name: "订单记录",
    key: "订单记录",
    component: markRaw(OrderRecord)
  }
]);

const activeName = ref(tabs.value[0].key);
</script>

<style lang="scss" scoped>

</style>
